import React, { Component } from 'react'
import { Table, Button, Popconfirm, message,Input } from 'antd'
import Adduser from '../User/AdminUser/Adduser'
import EditUser from '../User/AdminUser/EditUser'
import { PhotoProvider, PhotoConsumer } from 'react-photo-view';
import 'react-photo-view/dist/index.css';
import axios from 'axios'

export default class AdminUser extends Component {
    state = {
        showAddUserDialog: false,//显示添加用户的对话框
        showEditUserDialog: false,//显示修改的对话框
        editUserRow: null,//当前编辑的用户信息
        deleteArr: [],
        userlist: [],
        flag:false,
        index:0,
        columns: [{align:'center',key: 'manage_id', title: '编号', dataIndex: 'manage_id'},
        { align:'center',title: '用户名', dataIndex: 'manage_account'},
        { align:'center',title: '密码', dataIndex: 'manage_pwd', width:180,
        render: (text) => {
            return (
                <>
               <Input.Password value={text} style={{border:'none'}}/>
              </>
            )
        } },
        { align:'center',title: '头像', dataIndex: 'manage_avatar',
        render: (text) => {
            return (
                <>
                <PhotoProvider>
                    <PhotoConsumer src={text} >
                    <img src={text} alt="" style={{width:'50px',height:'50px'}}/>
                    </PhotoConsumer>
                </PhotoProvider>
              </>
            )
        } },
        {  align:'center',title: '操作', dataIndex: 'del',
            render: (del, row) => {
                return (
                    <div >
                        <Button
                            onClick={() => this.setState({ showEditUserDialog: true, editUserRow: row })}
                            style={{ width: '60px' }} type="primary">编辑</Button>
                        <Popconfirm
                            onConfirm={() => { this.deleteUser(row.manage_id) }}
                            onText='确认'
                            cancelText='取消'
                            title="您确认要删除吗"
                        >
                            <Button style={{ width: '60px' }} type="danger" >删除</Button>
                        </Popconfirm>
                    </div>
                )
            }
        }]
    }

    get=()=>{
        const token = localStorage.getItem('token');
        if (token) {
            axios.get('https://wx.xxmtcds.top:2333/admin/adminlist', {
                headers: { 'authorization': `${token}` }
            })
                .then(res => {
                    var arr=res.data;
                    this.setState({userlist:arr
                    }) 
                    // console.log(this.state.userlist);
                })
                .catch(error => {
                    console.log(error);
                })
        }
    }

    componentDidMount() {
        this.get();
    }

    //多选删除
    deletelist = () => {
        const { deleteArr, userlist } = this.state;
        let idArr = [];
        let newlist = userlist;
        console.log(deleteArr, newlist);
        for (let i = 0; i < deleteArr.length; i++) {
            newlist = newlist.filter(item => item.manage_id !== deleteArr[i].manage_id);
        }
        // console.log(idArr);//剩余的
        for (let i = 0; i < deleteArr.length; i++) {
            idArr.push(deleteArr[i].manage_id);
        }
        console.log(idArr);

        const token = localStorage.getItem('token');
        if (token) {
            console.log(token);

            axios({
                method: 'delete',
                url: 'https://wx.xxmtcds.top:2333/admin/adminlist/',
                data: {
                    isRows: true,
                    idArr: idArr
                },
                headers: { 'authorization': `${token}` }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(err => console.log(err))
        }
        this.setState({ userlist: newlist });

    }

    //行删除
    deleteUser = (adminid) => {
        
        const { userlist } = this.state;
        let templist = userlist;
        templist = templist.filter((item) => item.manage_id != adminid)

        const token = localStorage.getItem('token');
        if (token) {
            console.log(token);

            axios({
                method: 'delete',
                url: 'https://wx.xxmtcds.top:2333/admin/adminlist',
                data: {
                    isRows: false,
                    id: adminid
                },
                headers: { 'authorization': `${token}` }
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(err => console.log(err))
        }

        this.setState({ userlist: templist });
    }
    
    hideAddUserDialog = () => {
        this.setState({ showAddUserDialog: false });
    }
    hideEditUserDialog = () => {
        this.setState({ showEditUserDialog: false });
    }
    userRowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            // console.log(selectedRows);
            this.setState({ deleteArr: selectedRows });//主码
        }
    }

    edituser = (oldval, newval) => {

        let templist = this.state.userlist;
        let arr = [];
        let brr = {};
        brr.manage_id = oldval.manage_id;


        if (oldval.manage_account != newval.manage_account) {
            brr.manage_account = newval.manage_account;
        }
        if (oldval.manage_pwd != newval.manage_pwd) {
            brr.manage_pwd = newval.manage_pwd;
        }
        if (oldval.manage_avatar != newval.manage_avatar) {
            brr.manage_avatar = newval.manage_avatar;
        }

        templist.forEach((item, index) => {
            if (item.manage_id != oldval.manage_id) {

                arr.push(item);
            } else {
                arr.push(newval);
            }
        })
        // console.log(arr);//新的数组
        // console.log(brr);//id和只改了哪一项
        const token = localStorage.getItem('token');
        if (token) {

            axios.put("https://wx.xxmtcds.top:2333/admin/adminlist", brr, {
                headers: { 'authorization': `${token}` }
            })
                .then(function (response) {
                    // console.log(response);
                    message.info('修改成功！');
                })
                .catch(err => console.log(err))
        }
        this.setState({ userlist: arr });
    }

    render() {
        return (
            <div>
                <Button onClick={() =>this.setState({ showAddUserDialog: true }) } type="primary">添加</Button>
                <Popconfirm
                    onConfirm={this.deletelist}
                    onText='确认'
                    cancelText='取消'
                    title="您确认要删除吗"
                >
                 <Button type="danger">删除</Button>
                </Popconfirm>
                <Table
                    bordered
                    style={{ backgroundColor: '#FEFEFE' }}
                    dataSource={this.state.userlist}
                    columns={this.state.columns}
                    rowSelection={this.userRowSelection}//多选框
                    rowKey='manage_id'//主键
                    pagination={{ pageSize: 4}}
                ></Table>
                <Adduser get={this.get.bind(this)}  close={this.hideAddUserDialog} visible={this.state.showAddUserDialog} />
                <EditUser edituser={this.edituser.bind(this)} data={this.state.editUserRow} close={this.hideEditUserDialog} visible={this.state.showEditUserDialog} />
            </div>
        );
    }
}

